<template>
    <div>
        <div class="channel" :class="{'channel-fixed': isFixed}"  ga_event="left-channel-click">
            <a v-if="header && header.logoImg" class="logo" href="/">
                <img :src="header.logoImg" :alt="header.logoAlt" :style="{width: header.logoWidth, height: header.logoHeight}">
            </a>
            <h3 v-if="header && header.title" class="related-header">{{header.title}}</h3>
            <ul>
                <li v-for="item in channels.items">
                    <a class="channel-item"
                       :class="{'active': channels.tag === item.url || channels.tag === item.tag}"
                       :href="item.url"
                       @click="itemClick(item)"
                       :target="item.target ? item.target : '_self'"
                       :ga_event="item.log ? 'channel_' + item.log + '_click' : ''">
                        <span>{{ item.name }}</span>
                    </a>
                </li>

                <li v-if="channels.more" class="channel-more">
                    <a href="javascript:void(0);" class="channel-item">
                        <span>更多</span>
                    </a>
                    <div class="channel-more-layer">
                        <ul class="bui-box">
                            <li v-for="item in channels.more" class="bui-left">
                                <a class="channel-item"
                                   :href="item.url"
                                   @click="itemClick(item)"
                                   :target="item.target ? '_blank' : '_self'"
                                   :ga_event="item.log ? 'channel_' + item.log + '_click' : ''">
                                    <span>{{ item.name }}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less">
    @import "./channel.less";
</style>

<script>
  import Vue from 'vue';
  import throttle from 'lodash/throttle';
  import { getScrollTop } from '../../../src/js/utils';

  
  export default {
    name: 'Channel',
    props: {
      header: Object,
      channels: {
        type: Object,
        required: true
      },
      isSuspended: {
        type: Boolean,
        default: false
      },
      scrollHandler: {
        type: Function,
        default: function () {
          return getScrollTop(window) > 40;
        }
      }
    },
    data() {
      return {
        isFixed: false,
        throttledScrollHandler: new Function()
      };
    },
    created() {
      this.isFixed = this.isSuspended;

      this.channels.items.map(item => {
        if (!item.url) {
          item.url = 'javascript:void(0);';
        }
        return item;
      });
      this.channels.more && this.channels.more.map(item => {
        if (!item.url) {
          item.url = 'javascript:void(0);';
        }
        return item;
      });

      this.throttledScrollHandler =  throttle(() => {
        this.isFixed = this.scrollHandler();
      }, 80);

      window.addEventListener('scroll', this.throttledScrollHandler, false);
    },
    mounted() {
      var self = this;

      this.channels.more && this.channels.more.forEach(function (item, index) {
        if (item.url === self.channels.tag) {

          var mainLen = self.channels.items.length;
          var tmp = self.channels.items[mainLen-1];

          Vue.set(self.channels.items, mainLen - 1, item);
          Vue.set(self.channels.more, index, tmp);
        }
      });
    },
    destroyed() {
      window.removeEventListener('scroll', this.throttledScrollHandler);
    },
    methods: {
      itemClick (item) {
        this.$emit('channel-item-click', item)
      }
    }
  };
</script>



// WEBPACK FOOTER //
// channel.vue?87826304
